
new Vue({
    el: '#content',
    data: {
        isAll: true,
        showType: [],
        filter: {
            prime: false,
            odd: false,
            odevity: false
        },
        guesses: [
            {
                status: '待挑战',
                amount: '1.0',
                type: '猜奇数',
                guess: '10',
                unit: '个'
            },
            {
                status: '待挑战',
                amount: '5.0',
                type: '猜奇偶',
                guess: '偶数多',
                unit: ''

            },
            {
                status: '待挑战',
                amount: '0.1',
                type: '猜素数',
                guess: '3',
                unit: '个'
            },
            {
                status: '待挑战',
                amount: '2.0',
                type: '猜奇偶',
                guess: '奇数多',
                unit: ''
            },
            {
                status: '待挑战',
                amount: '5.0',
                type: '猜奇偶',
                guess: '偶数多',
                unit: ''

            },
            {
                status: '待挑战',
                amount: '0.1',
                type: '猜素数',
                guess: '3',
                unit: '个'
            },
            {
                status: '待挑战',
                amount: '2.0',
                type: '猜奇偶',
                guess: '奇数多',
                unit: ''
            },
        ]
    },
    methods: {
        guessClass: function (index) {
            return {
                'bg-blue-light': this.guesses[index].type === '猜奇偶',
                'bg-blue': this.guesses[index].type === '猜奇数',
                'bg-blue-dark': this.guesses[index].type === '猜素数'
            }
        },
        filterType(item) {
            switch (item) {
                case 0:
                this.filter.prime = false;
                this.filter.odd = false;
                this.filter.odevity = false;
                break;
                case 1:
                if (this.filter.prime) {
                    this.filter.prime = false;
                } else {
                    this.filter.prime = true;
                }
                break;
                case 2:
                if (this.filter.odd) {
                    this.filter.odd = false;
                } else {
                    this.filter.odd = true;
                }
                break;
                case 3:
                if (this.filter.odevity) {
                    this.filter.odevity = false;
                } else {
                    this.filter.odevity = true;
                }
                break;
            }
        }
    },
    watch: {
        filter: {
            handler: function(val, oldVal) {
                if (this.filter.prime) {
                    if (this.showType.indexOf('猜素数') == -1) {
                        this.showType.push('猜素数');
                    } 
                } else {
                    var index = this.showType.indexOf('猜素数');
                    if (index > -1) {
                        this.showType.splice(index, 1);
                    }
                }
                if (this.filter.odd) {
                    if (this.showType.indexOf('猜奇数') == -1) {
                        this.showType.push('猜奇数');
                    }
                } else {
                    var index = this.showType.indexOf('猜奇数');
                    if (index > -1) {
                        this.showType.splice(index, 1);
                    }
                }
                if (this.filter.odevity) {
                    if (this.showType.indexOf('猜奇偶') == -1) {
                        this.showType.push('猜奇偶');
                    }
                } else {
                    var index = this.showType.indexOf('猜奇偶');
                    if (index > -1) {
                        this.showType.splice(index, 1);
                    }
                }
                console.log(this.showType);
            },
            deep: true
        }
    }
})